<!DOCTYPE html>
<html>
<head>
	<title>Home</title>
	<!--fonts-->
		<link href='http://fonts.useso.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
		<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
	<!--//fonts-->
			<link href="css/bootstrap.css" rel="stylesheet">
			<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!-- for-mobile-apps -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Music World Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
		Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- //for-mobile-apps -->	
	<!-- js -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
	<!-- js -->
	<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div class="header">
	<div class="container">
		<div class="header-left">
			<a href="index.html">Music World</a>
		</div>
		<div class="navigation">
			<nav class="navbar navbar-default">
					<div class="navbar-header">
						  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"> </span>
							<span class="icon-bar"> </span>
							<span class="icon-bar"> </span>
						  </button>
					</div>
					<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
						  <ul class="nav navbar-nav">
							<li class="hvr-bounce-to-bottom active"><a href="index.html">HOME <span class="sr-only">(current)</span></a></li>
							<li class="hvr-bounce-to-bottom"><a href="about.html">ABOUT</a></li>
							<li class="hvr-bounce-to-bottom"><a href="album.html">ALBUM</a></li>
							<li class="hvr-bounce-to-bottom"><a href="typography.html">ARTISTS</a></li>
							<li class="hvr-bounce-to-bottom"><a href="contact.html">CONTACT</a></li>
						  </ul>
						<div class="clearfix"> </div>
					</div><!-- /.navbar-collapse -->
			</nav>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //header -->
<!-- banner -->
<div class="banner">
	<div class="container">
		<script src="js/responsiveslides.min.js"></script>
			<script>  
				$(function () {
				  $("#slider").responsiveSlides({
					auto: true,
					nav: true,
					speed: 500,
					namespace: "callbacks",
					pager: true,
				  });
				});
			  </script>
			<div class="caption">
				<div class="slider">
					<div class="callbacks_container">
						    <ul class="rslides" id="slider">
								<li><h3>THE MUSIC WORLD</h3></li>	
								<li><h3>WORLDS BEST MUSIC</h3></li>	
						    </ul>
							<p>Which Have You Never Seen Before!!</p>
						    <a class="hvr-bounce-to-bottom morebtn" href="#">MORE</a>
					</div>
				</div>
			</div>
	</div>
</div>
<!-- //banner -->
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div>
<!-- banner-bottom -->
<div class="banner-bottom">
	<div class="container">
		<div class="bottom-grids">
			<div class="col-md-3 bottom-one">
				<div class="bottom-text">
					<h3>AFRICAN MUSIC</h3>
					<p>Sed ut perspiciatis unde
					omnis iste natus error sit
					voluptatem accusantium doloremque 
					 totam rem aperiam, eaque ip</p>
				</div>
			</div>
			<div class="col-md-3 bottom-two">
				<div class="bottom-text">
					<h3>HIP HOP MUSIC</h3>
					<p>Sed ut perspiciatis unde
					omnis iste natus error sit
					voluptatem accusantium doloremque 
					 totam rem aperiam, eaque ip</p>
				</div>
			</div>
			<div class="col-md-3 bottom-three">
				<div class="bottom-text">
					<h3>HARD ROCK</h3>
					<p>Sed ut perspiciatis unde
					omnis iste natus error sit
					voluptatem accusantium doloremque 
					 totam rem aperiam, eaque ip</p>
				</div>
			</div>
			<div class="col-md-3 bottom-four">
				<div class="bottom-text">
					<h3>FOLK MUSIC</h3>
					<p>Sed ut perspiciatis unde
					omnis iste natus error sit
					voluptatem accusantium doloremque 
					 totam rem aperiam, eaque ip</p>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //banner-bottom -->
<!-- welcome -->
<div class="welcome">
	<div class="container">
		<div class="welcome-head">
			<h3>WELCOME</h3>
			<p>Nam libero tempore, cum soluta nobis est eligendi optio 
			cumque nihil impedit quo minus id quod maxime placeat facere
			possimus, omnis voluptas assumenda est, omnis dolor repellendus. 
			Temporibus autem quibusdam et aut officiis debitis aut rerum 
			necessitatibus saepe eveniet ut et voluptates repudiandae sint 
			et molestiae non recusandae.</p>
		</div>
	</div>
</div>
<!-- //welcome -->
<!-- popular -->
<div class="popular">
	<div class="container">
		<div class="popular-head">
			<h3>MY ALBUM</h3>
		</div>
		<div class="popular-grids">
			<div class="col-md-4 popular-grid">
				<img src="images/111.jpg" alt=""/>
				<div class="pop-desc">
					<p>MODERN MUSIC</p>
				</div>
			</div>
			<div class="col-md-4 popular-grid">
				<img src="images/222.jpg" alt=""/>
				<div class="pop-desc">
					<p>HIP HOP MUSIC</p>
				</div>
			</div>
			<div class="col-md-4 popular-grid">
				<img src="images/333.jpg" alt=""/>
				<div class="pop-desc">
					<p>FOLK MUSIC</p>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //popular -->
<!-- experience -->
<div class="we-focus">
	<div class="container">
		<div class="focus-grids">
			<div class="col-md-6 focus-grid">
				<h3>EXPERIENCE <span>THE FEEL OF GOOD MUSIC</span></h3>
				<p>Donec nulla justo, pharetra nulla, lacinia pulvinar nunc rutrum nisi vel nib  impedit quo minus id quod maxime placeat facere
			possimus, omnis voluptas assumenda est, omnis dolor repellendus. </p>
			</div>
			<div class="col-md-3 focus-grid">
				<div class="focus-border">
					<div class="focus-layout">
						<div class="focus-image a">
							<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
						</div>
						<h4>DRUM STICKS</h4>
					</div>
				</div>
			</div>
			<div class="col-md-3 focus-grid">
				<div class="focus-border">
					<div class="focus-layout">
						<div class="focus-image b"><span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span></div>
						<h4>SAXOPHONE</h4>
					</div>
				</div>
			</div>
			<div class="col-md-3 focus-grid">
				<div class="focus-border">
					<div class="focus-layout">
						<div class="focus-image c"><span class="glyphicon glyphicon-film" aria-hidden="true"></span></div>
						<h4>TUBA</h4>
					</div>
				</div>
			</div>
			<div class="col-md-3 focus-grid">
				<div class="focus-border">
					<div class="focus-layout">
						<div class="focus-image d"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span></div>
						<h4>GUITAR</h4>
					</div>
				</div>
			</div>
			<div class="col-md-3 focus-grid">
				<div class="focus-border">
					<div class="focus-layout">
						<div class="focus-image e"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></div>
						<h4>SILHOUETTE</h4>
					</div>
				</div>
			</div>
			<div class="col-md-3 focus-grid">
				<div class="focus-border">
					<div class="focus-layout">
						<div class="focus-image f"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></div>
						<h4>DRUM SET</h4>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- experience -->
<!-- full -->
<div class="full">
	<div class="container">
		<div class="col-md-4 full-grid">
			<div class="full-text">
				<div class="full-left">
					<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
				</div>
				<div class="full-right">
					<h3>FULL QUALITY AUDIO</h3>
				</div>
				<div class="clearfix"></div>
			</div>
			<p>Donec nulla justo, pharetra nulla, lacinia pulvinar nunc rutrum nisi vel nib  impedit quo minus id quod maxime placeat facere
			possimus, omnis voluptas assumenda est, omnis dolor repellendus. </p>
			<a class="hvr-bounce-to-bottom read-more" href="album.html">MORE</a>
		</div>
		<div class="col-md-4 full-grid">
			<div class="full-text">
				<div class="full-left">
					<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
				</div>
				<div class="full-right">
					<h3>ALL FORMATS</h3>
				</div>
				<div class="clearfix"></div>
			</div>
			<p>Donec nulla justo, pharetra nulla, lacinia pulvinar nunc rutrum nisi vel nib  impedit quo minus id quod maxime placeat facere
			possimus, omnis voluptas assumenda est, omnis dolor repellendus. </p>
			<a class="hvr-bounce-to-bottom read-more" href="album.html">MORE</a>
		</div>
		<div class="col-md-4 full-grid">
			<div class="full-text">
				<div class="full-left">
					<span class="glyphicon glyphicon-film" aria-hidden="true"></span>
				</div>
				<div class="full-right">
					<h3>FULL QUALITY VIDEO</h3>
				</div>
				<div class="clearfix"></div>
			</div>
			<p>Donec nulla justo, pharetra nulla, lacinia pulvinar nunc rutrum nisi vel nib  impedit quo minus id quod maxime placeat facere
			possimus, omnis voluptas assumenda est, omnis dolor repellendus. </p>
			<a class="hvr-bounce-to-bottom read-more" href="album.html">MORE</a>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //full -->
<!-- footer -->
<div class="footer">
	<div class="container">
		<div class="footer-grids">	
			<div class="col-md-3 footer-grid">
				<h4>ADDRESS</h4>
				<ul>
					<li>Music World</li>
					<li>4111 Deer Haven Drive Greenville </li>
					<li>SC 29601 </li>
					<li>Hours: Mon-Fri 9am - 6:00pm</li>
				</ul>
			</div>
			<div class="col-md-3 footer-grid">
				<h4>GET IN TOUCH</h4>
				<ul>
					<li>Tel: +1 234-567-890</li>
					<li>Fax: +1 646-216-9789</li>
					<li>Email: <a href="mailto:info@example.com">info@yourdomain.com </a></li>
				</ul>
			</div>
			<div class="col-md-3 footer-grid">
				<h4>SUBSCRIBE</h4>
				<form>
					<input type="email" value="Enter your email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Enter your email';}" required="">
					<input type="submit" value=" ">
				</form>
			</div>
			<div class="col-md-3 footer-grid">
				<h3><a href="index.html">MUSIC WORLD</a></h3>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //footer -->
<!-- copy -->
<div class="copy-right">
	<div class="container">
		<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>
</div>
<!-- copy -->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->


<!-- for bootstrap working -->
		<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
</body>
</html>
